<template>
	<view class="page">
		<u-navbar :auto-back="true" placeholder :title="title" :border-bottom="false">
			<template #right>
				<!-- 管理错题按钮 -->
				<!-- <view class="manage-btn" @click="manageErrors">
					<u-text iconStyle="font-size: 36rpx;margin-right: 4rpx;margin-top:8rpx;color:#FFA40C" color="#FFA40C"
						size="24rpx" prefixIcon="grid" class="manage-text" :text="isEdit ? '取消管理' : '管理错题'"></u-text>
				</view> -->
			</template>
		</u-navbar>
		<!-- 筛选条件区域 -->
		<view class="filter-section">
			<!-- 第一行筛选条件 -->
			<view class="filter-row">
				<view class="flex-1 relative">
					<u-text iconStyle="margin-left:5rpx;font-size:24rpx;color:#999"
						:suffixIcon="openFilterType ? 'arrow-up' : 'arrow-down'" size="30rpx" align="center"
						:text="filterType?.label ? filterType.label : '按日期排序'" @click="openFilterType = !openFilterType">
					</u-text>
				</view>
				<view class="flex-1 relative" v-if="filterType.value === 0">
					<u-text iconStyle="margin-left:5rpx;font-size:24rpx;color:#999"
						:suffixIcon="openSourceFilter ? 'arrow-up' : 'arrow-down'" size="30rpx" align="center"
						:text="sourceFilter?.label ? sourceFilter.label : '来源'"
						@click="openSourceFilter = !openSourceFilter"></u-text>
				</view>
				<!-- <view class="flex-1">
					<up-dropdown ref="dropdown">
						<up-dropdown-item v-model="filterType" :title="filterType?.label ? filterType.label : '按日期排序'"
							:options="typeOptions" @change="onFilterTypeChange">
						</up-dropdown-item>
						<up-dropdown-item v-model="subjectFilter" :title="subjectFilter?.label ? subjectFilter.label : '科目'"
							:options="subjectOptions" @change="onSubjectChange">
						</up-dropdown-item>
						<up-dropdown-item v-model="sourceFilter" :title="sourceFilter?.label ? sourceFilter.label : '来源'"
							:options="sourceOptions" @change="onSourceChange" v-if="filterType.value === 0">
						</up-dropdown-item>
					</up-dropdown>
				</view> -->
				<view class="flex-1" v-if="filterType.value === 1">
					<u-text :suffixIcon="masteryRateFilter ? 'arrow-downward' : 'arrow-upward'"
						iconStyle="margin-left:5rpx;font-size:22rpx;color:#999" size="30rpx" align="center" text="掌握率"
						@click="masteryRateFilter = !masteryRateFilter"></u-text>
				</view>
				<view class="flex-1" v-if="filterType.value === 1">
					<u-text :suffixIcon="quantityFilter ? 'arrow-downward' : 'arrow-upward'"
						iconStyle="margin-left:5rpx;font-size:22rpx;color:#999" size="30rpx" align="center" text="数量"
						@click="quantityFilter = !quantityFilter"></u-text>
				</view>
				<view class="flex-1" @click="manageErrors" v-if="filterType.value === 0">
					<u-text align="center" iconStyle="font-size: 36rpx;margin-right: 4rpx;margin-top:8rpx;color:#FFA40C"
						color="#FFA40C" size="28rpx" prefixIcon="grid" class="manage-text"
						:text="isEdit ? '取消管理' : '管理错题'"></u-text>
				</view>
			</view>
			<view class="dropdown-menu" v-if="openFilterType">
				<view class="dropdown-menu-item" v-for="item in typeOptions" :key="item.value"
					@click="onFilterTypeChange(item.value)">
					<u-text size="30rpx" :text="item.label"></u-text>
				</view>
			</view>
			<view class="dropdown-menu" v-if="openSourceFilter">
				<view class="dropdown-menu-item" v-for="item in sourceOptions" :key="item.value"
					@click="onSourceChange(item.value)">
					<u-text size="30rpx" :text="item.label"></u-text>
				</view>
			</view>
		</view>

		<!-- 日期范围选择 -->
		<view class="date-range-section" v-if="filterType.value === 0">
			<u-icon name="calendar" size="36rpx" color="#999"></u-icon>
			<u-text align="center" color="#999" size="24rpx" :text="startDate" @click="showEndDatePicker"></u-text>
			<u-text align="center" color="#999" size="24rpx" text="至"></u-text>
			<u-text align="center" color="#999" size="24rpx" :text="endDate" @click="showEndDatePicker"></u-text>
		</view>

		<view class="main">
			<!-- 知识点列表 -->
			<template v-if="filterType.value === 1">
				<view v-for="(group, index) in knowledgeGroups" :key="index">
					<!-- 日期分组标题 -->
					<u-text color="#999" size="24rpx" :text="group.date"></u-text>
					<!-- 知识点项目 -->
					<up-checkbox-group v-model="selectedMistakesList">
						<view class="knowledge-item" v-for="item in group.items" :key="item.id" @click="viewKnowledge(item)">
							<!-- 编辑时显示的多选 -->
							<up-checkbox shape="circle" activeColor="#FFB74D" :name="item.id" v-if="isEdit"></up-checkbox>
							<!-- 知识点及描述 -->
							<view class="flex-1 margin-right-lg margin-left-xs">
								<u-text color="#333" size="32rpx" :text="item.title"></u-text>
								<u-text margin="10rpx 0 0 0" color="#666" size="24rpx" :text="item.description"></u-text>
							</view>
							<!-- 右侧箭头 -->
							<u-icon name="arrow-right" size="28rpx" color="#C8C8C8"></u-icon>
						</view>
					</up-checkbox-group>
				</view>
			</template>

			<template v-if="filterType.value === 0">
				<view class="question-list">
					<!-- 错题项目 -->
					<view class="question-item" v-for="(item, index) in questionList" :key="index"
						@click="goToQuestionDetail(item)">
						<!-- 日期和来源信息 -->
						<view class="flex justify-between align-center">
							<u-text color="#999999" size="28rpx" :text="`来源:${item.source}`"></u-text>
							<u-text align="right" color="#999999" size="28rpx" text="知识点确认中"></u-text>
						</view>
						<u-divider></u-divider>
						<!-- 题目内容 -->
						<view class="margin-top-sm">
							<u-text color="#333333" size="32rpx" :text="item.content"></u-text>
						</view>

						<!-- 题目图片 -->
						<view v-if="item.image">
							<image style="width:300rpx;height:300rpx;" :src="item.image" mode="aspectFit"
								@click="previewImage(item.image)">
							</image>
						</view>
					</view>
				</view>
			</template>
			<!-- 日期选择器 -->
			<u-datetime-picker ref="startDatePicker" v-model="startDateValue" mode="date" @confirm="confirmStartDate"
				@cancel="cancelDatePicker">
			</u-datetime-picker>

			<u-datetime-picker ref="endDatePicker" v-model="endDateValue" mode="date" @confirm="confirmEndDate"
				@cancel="cancelDatePicker">
			</u-datetime-picker>

			<view class="mask" v-if="openFilterType || openSourceFilter" @click="closeFilter"></view>
		</view>
		<view class="footer" v-if="isEdit">
			<up-checkbox size="36rpx" labelSize="32rpx" shape="circle" activeColor="#FFB74D" v-model="isAllChecked" label="全选"
				@change="changeAllChecked"></up-checkbox>
			<view class="margin-left flex-1">
				<u-button shape="circle" size="large" :color="themePrimary" text="删除" @click="batchDelete"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary, themeTertiary } = useTheme();
const title = ref('')
onLoad((options) => {
	title.value = options.name + '错题本'
})
// 筛选条件数据
const filterType = ref({ name: '按日期先后排序', value: 0 })
const subjectFilter = ref(null)
const sourceFilter = ref(null)
const openFilterType = ref(false)
const openSourceFilter = ref(false)
const isEdit = ref(false)// 是否编辑状态
const selectedMistakesList = ref([])// 选中的错题列表
const isAllChecked = ref(false)// 是否全选
const masteryRateFilter = ref(false)// 掌握率排序 true:正序 false:倒序
const quantityFilter = ref(false)// 数量排序 true:正序 false:倒序
const typeOptions = ref([
	{ label: '按日期排序', value: 0 },
	{ label: '按知识点排序', value: 1 },
	// { label: '按掌握率从高到低', value: 2 },
	// { label: '按掌握率从低到高', value: 3 }
])

// const subjectOptions = ref([
// 	{ label: '语文', value: 1 },
// 	{ label: '数学', value: 2 },
// 	{ label: '英语', value: 3 }
// ])

const sourceOptions = ref([
	{ label: '教师拍照', value: 1 },
	{ label: '家长拍照', value: 2 },
	{ label: '错题重练', value: 3 }
])

// 日期相关
const startDate = ref('2020-02-21')
const endDate = ref('2020-03-11')
const startDateValue = ref(new Date('2020-02-21'))
const endDateValue = ref(new Date('2020-03-11'))

// 知识点数据
const knowledgeGroups = ref([
	{
		date: '2020-02-21',
		items: [
			{
				id: 1,
				title: '10以内加减法',
				description: '综合掌握率90%，错题数量10道'
			},
			{
				id: 2,
				title: '10以内加减法',
				description: '综合掌握率90%，错题数量10道'
			}
		]
	}
])

// 错题数据
const questionList = ref([
	{
		id: 1,
		date: '2020-02-21',
		source: '教师拍摄',
		content: '如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。',
		image: '/static/image/img-math-bg.png' // 使用现有的数学图片作为示例
	},
	{
		id: 2,
		date: '2020-02-21',
		source: '教师拍摄',
		content: '如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。',
		image: '/static/image/img-math-bg.png' // 使用现有的数学图片作为示例
	}
])
// 方法
const onFilterTypeChange = (value) => {
	filterType.value = typeOptions.value.find(item => item.value === value)
	openFilterType.value = false;
	openSourceFilter.value = false
}

const onSourceChange = (value) => {
	sourceFilter.value = sourceOptions.value.find(item => item.value === value)
	openSourceFilter.value = false
	openFilterType.value = false
}

const manageErrors = () => {
	isEdit.value = !isEdit.value
}

const showStartDatePicker = () => {
	uni.showModal({
		title: '提示',
		content: '选择开始日期',
		showCancel: false
	})
}

const showEndDatePicker = () => {
	uni.showModal({
		title: '提示',
		content: '选择结束日期',
		showCancel: false
	})
}

const confirmStartDate = (value) => {
	startDate.value = formatDate(value.value)
	startDateValue.value = value.value
}

const confirmEndDate = (value) => {
	endDate.value = formatDate(value.value)
	endDateValue.value = value.value
}

const cancelDatePicker = () => {
	console.log('取消选择日期')
}

const formatDate = (date) => {
	const d = new Date(date)
	const year = d.getFullYear()
	const month = String(d.getMonth() + 1).padStart(2, '0')
	const day = String(d.getDate()).padStart(2, '0')
	return `${year}-${month}-${day}`
}

const viewKnowledge = (item) => {
	// 跳转到错题详情页面
	uni.navigateTo({
		url: `/pages/common/knowledge/questionList?id=${item.id}&title=${item.title}`
	})
}

const changeChecked = (item, e) => {
	// console.log('改变选中状态:', item, e)
	// if (e) {
	// 	selectedMistakesList.value.push(item)
	// } else {
	// 	selectedMistakesList.value = selectedMistakesList.value.filter(item => item.id !== item.id)
	// }
}
const batchDelete = () => {
	uni.showModal({
		title: '提示',
		content: `已选择错题 ${selectedMistakesList.value.length}道，确定要删除吗？`,
		showCancel: true,
		success: (res) => {
			if (res.confirm) {
				console.log('批量删除:', selectedMistakesList.value)
				knowledgeGroups.value.forEach(group => {
					group.items = group.items.filter(item => !selectedMistakesList.value.includes(item.id))
				})
				isEdit.value = false
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			}
		}
	})
}

const changeAllChecked = (e) => {
	console.log('改变全选状态:', e)
	if (e) {
		knowledgeGroups.value.forEach(group => {
			group.items.forEach(item => {
				selectedMistakesList.value.push(item.id)
			})
		})
	} else {
		selectedMistakesList.value = []
	}
}

const closeFilter = () => {
	openFilterType.value = false
	openSourceFilter.value = false
}

onMounted(() => {
	console.log('错题知识点页面加载完成')
})
</script>

<style scoped lang="scss">
/* 筛选条件区域 */
.filter-section {
	background-color: #FFFFFF;
	padding: 0;
	position: relative
}

.filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
}

.manage-btn {
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
	border-radius: 32rpx;
}

.manage-text {
	font-size: 28rpx;
	color: #666666;
	margin-left: 8rpx;
}

/* 日期范围选择 */
.date-range-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	padding: 24rpx 32rpx;
	border-top: 1rpx solid #F0F0F0;
}

.knowledge-item {
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-top: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.dropdown-menu {
	position: absolute;
	top: 88rpx;
	left: 0;
	width: 100%;
	height: 100%;
	width: 100%;
	z-index: 1000;
	border-top: solid 1px #eee;
}

.dropdown-menu-item {
	padding: 20rpx 40rpx;
	border-bottom: solid 1px #eee;
	background: white;
}

.question-item {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.mask {
	height: calc(100% - 230rpx);
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 230rpx;
	left: 0;
	z-index: 999;
}
</style>
